<template>
    <div class="menu" v-show="!$route.meta.hidden">
        <div class="logo">
            <p>LOGO</p>
        </div>
        <el-menu
            :default-active="menuIndex"
            :unique-opened="true"
            class="el-menu-vertical-demo"
            background-color="#101c29"
            @select="selectMenu"
            text-color="#fff"
            active-text-color="#fff"
        >
            <el-menu-item index="home">
                <i class="iconfont icon-index-copy"></i>
                <span slot="title">首页</span>
            </el-menu-item>

            <el-submenu index="file">
                <template slot="title">
                    <i class="iconfont icon-wenjian"></i>
                    <span>文件</span>
                </template>
                <el-menu-item index="contractlist">电子签约</el-menu-item>
                <el-menu-item index="physical">物理用印</el-menu-item>
                <el-menu-item index="company/chart">文件统计</el-menu-item>
            </el-submenu>

            <el-submenu index="seal-manage">
                <template slot="title">
                    <i class="iconfont icon-yinzhang"></i>
                    <span>印控</span>
                </template>
                <el-menu-item index="seal-electronic">电子印章</el-menu-item>
                <el-menu-item index="seal-physical">物理印章</el-menu-item>
            </el-submenu>

            <el-submenu index="organization">
                <template slot="title">
                    <i class="iconfont icon-platform_org"></i>
                    <span>组织</span>
                </template>
                <el-menu-item index="companyinfo">基本信息</el-menu-item>
                <el-menu-item index="employee">组织与成员</el-menu-item>
                <el-menu-item index="platformmanage">分支机构管理</el-menu-item>
                <el-menu-item index="role">权限管理</el-menu-item>
                <el-menu-item index="fee">费用中心</el-menu-item>
                <el-menu-item index="external-customers/corporate"
                    >外部客户</el-menu-item
                >
            </el-submenu>

            <el-submenu index="configuration">
                <template slot="title">
                    <i class="iconfont icon-peizhi"></i>
                    <span>配置</span>
                </template>
                <el-menu-item index="template-manage">模板库管理</el-menu-item>
                <el-menu-item index="businesstype">业务流配置</el-menu-item>
            </el-submenu>

            <el-menu-item index="audit">
                <i class="iconfont icon-shenji"></i>
                <span slot="title">审计</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
import { menuModule } from '@/store/modules/menu'

export default {
    computed: {
        menuIndex() {
            return menuModule.homeMenuIndex
        }
    },
    methods: {
        /** 控制路由跳转 */
        selectMenu(index) {
            // 维护active-index值
            menuModule.setHomeMenuIndex(index)
            const isRightWay = ['home', 'employee', 'audit'].includes(index)
            if (isRightWay) {
                this.$router.push({ name: index })
            }
        }
    }
}
</script>

<style lang="less" scoped>
.menu {
    border-right: 1px solid #e6e6e6;
    width: 208px;
    height: 100%;
    padding-bottom: 30px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    -webkit-transition: margin-left 0.3s ease-out;
    transition: margin-left 0.3s ease-out;
    background-color: rgb(16, 28, 41);
}
.logo {
    color: #fff;
    text-align: center;
    font-size: 60px;
    height: 80px;
    line-height: 80px;
    border-bottom: 1px solid #1d242d;
}

/** Element-menu */
/deep/ .el-menu-item {
    opacity: 0.6;
    display: flex;
    align-items: center;
    height: 48px;
    line-height: 48px;
    & > span {
        margin-left: 20px;
    }

    /** 激活样式 */
    &.is-active {
        border: none;
        background-color: #2489f2 !important;
        opacity: 1;
    }
}

/** 鼠标悬停 */
/deep/ .el-submenu__title:hover,
/deep/ .el-menu-item:hover {
    opacity: 1;
}

/deep/ .el-submenu {
    .el-submenu__title {
        opacity: 0.6;
        display: flex;
        align-items: center;
        height: 48px;
        line-height: 48px;
        & > span {
            margin-left: 20px;
        }
    }

    /** 展开样式修复 */
    &.is-active {
        background-color: rgb(16, 28, 41);
        border: none;
    }
}
</style>
